<!-- views/SystemSettings.vue -->
<template>
  <div class="settings-container">
    <el-page-header @back="router.back()" class="page-header">
      <template #content>
        <div class="header-content">
          <el-icon :size="24" class="header-icon"><Setting /></el-icon>
          <span class="header-title">系统设置</span>
        </div>
      </template>
    </el-page-header>

    <el-tabs v-model="activeTab" class="settings-tabs">
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <el-card shadow="never" class="setting-card">
          <template #header>
            <div class="card-header">
              <span>系统配置</span>
            </div>
          </template>
          <el-form :model="systemConfig" label-width="180px">
            <el-form-item label="联邦学习名称">
              <el-input v-model="systemConfig.projectName" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item label="训练轮次">
              <el-input-number v-model="systemConfig.epochs" :min="1" :max="1000" />
            </el-form-item>
            <el-form-item label="聚合频率">
              <el-select v-model="systemConfig.aggregationFrequency" placeholder="请选择聚合频率">
                <el-option label="每轮聚合" value="every_epoch" />
                <el-option label="每2轮聚合" value="every_2_epochs" />
                <el-option label="每5轮聚合" value="every_5_epochs" />
              </el-select>
            </el-form-item>
            <el-form-item label="自动保存模型">
              <el-switch v-model="systemConfig.autoSave" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSystemConfig">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 模型参数 -->
      <el-tab-pane label="模型参数" name="model">
        <el-card shadow="never" class="setting-card">
          <template #header>
            <div class="card-header">
              <span>模型配置</span>
            </div>
          </template>
          <el-form :model="modelConfig" label-width="180px">
            <el-form-item label="学习率">
              <el-slider
                  v-model="modelConfig.learningRate"
                  :min="0.0001"
                  :max="0.1"
                  :step="0.0001"
                  show-input
                  input-size="small"
              />
            </el-form-item>
            <el-form-item label="批量大小">
              <el-input-number v-model="modelConfig.batchSize" :min="8" :max="512" />
            </el-form-item>
            <el-form-item label="优化器">
              <el-select v-model="modelConfig.optimizer" placeholder="请选择优化器">
                <el-option label="SGD" value="sgd" />
                <el-option label="Adam" value="adam" />
                <el-option label="RMSprop" value="rmsprop" />
              </el-select>
            </el-form-item>
            <el-form-item label="损失函数">
              <el-select v-model="modelConfig.lossFunction" placeholder="请选择损失函数">
                <el-option label="交叉熵" value="cross_entropy" />
                <el-option label="均方误差" value="mse" />
                <el-option label="KL散度" value="kld" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveModelConfig">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <el-card shadow="never" class="setting-card">
          <template #header>
            <div class="card-header">
              <span>安全配置</span>
            </div>
          </template>
          <el-form :model="securityConfig" label-width="180px">
            <el-form-item label="异常检测阈值">
              <el-slider
                  v-model="securityConfig.anomalyThreshold"
                  :min="1"
                  :max="5"
                  :step="0.1"
                  show-input
                  input-size="small"
              />
              <el-tooltip content="设置参数更新偏离标准差的倍数阈值" placement="top">
                <el-icon class="tip-icon"><Warning /></el-icon>
              </el-tooltip>
            </el-form-item>
            <el-form-item label="差分隐私">
              <el-switch v-model="securityConfig.differentialPrivacy" />
            </el-form-item>
            <el-form-item label="噪声比例" v-if="securityConfig.differentialPrivacy">
              <el-slider
                  v-model="securityConfig.noiseScale"
                  :min="0.01"
                  :max="1"
                  :step="0.01"
                  show-input
                  input-size="small"
              />
            </el-form-item>
            <el-form-item label="客户端验证">
              <el-switch v-model="securityConfig.clientVerification" />
            </el-form-item>
            <el-form-item label="模型加密">
              <el-switch v-model="securityConfig.modelEncryption" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSecurityConfig">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 通知设置 -->
      <el-tab-pane label="通知设置" name="notification">
        <el-card shadow="never" class="setting-card">
          <template #header>
            <div class="card-header">
              <span>通知配置</span>
            </div>
          </template>
          <el-form :model="notificationConfig" label-width="180px">
            <el-form-item label="邮件通知">
              <el-switch v-model="notificationConfig.emailNotification" />
            </el-form-item>
            <el-form-item label="邮件地址" v-if="notificationConfig.emailNotification">
              <el-input v-model="notificationConfig.emailAddress" placeholder="请输入接收通知的邮箱地址" />
            </el-form-item>
            <el-form-item label="异常警报">
              <el-switch v-model="notificationConfig.alertNotification" />
            </el-form-item>
            <el-form-item label="训练完成通知">
              <el-switch v-model="notificationConfig.trainingCompleteNotification" />
            </el-form-item>
            <el-form-item label="聚合完成通知">
              <el-switch v-model="notificationConfig.aggregationCompleteNotification" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveNotificationConfig">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Setting, Warning } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

const activeTab = ref('basic')

// 系统配置
const systemConfig = ref({
  projectName: '联邦学习项目',
  epochs: 50,
  aggregationFrequency: 'every_epoch',
  autoSave: true
})

// 模型配置
const modelConfig = ref({
  learningRate: 0.001,
  batchSize: 32,
  optimizer: 'adam',
  lossFunction: 'cross_entropy'
})

// 安全配置
const securityConfig = ref({
  anomalyThreshold: 3,
  differentialPrivacy: false,
  noiseScale: 0.1,
  clientVerification: true,
  modelEncryption: false
})

// 通知配置
const notificationConfig = ref({
  emailNotification: true,
  emailAddress: 'admin@example.com',
  alertNotification: true,
  trainingCompleteNotification: true,
  aggregationCompleteNotification: false
})

const saveSystemConfig = () => {
  ElMessage.success('系统配置已保存')
  console.log('保存系统配置:', systemConfig.value)
}

const saveModelConfig = () => {
  ElMessage.success('模型配置已保存')
  console.log('保存模型配置:', modelConfig.value)
}

const saveSecurityConfig = () => {
  ElMessage.success('安全配置已保存')
  console.log('保存安全配置:', securityConfig.value)
}

const saveNotificationConfig = () => {
  ElMessage.success('通知配置已保存')
  console.log('保存通知配置:', notificationConfig.value)
}
</script>

<style scoped>
.settings-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-title {
  font-size: 18px;
  font-weight: 500;
}

.setting-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  font-size: 16px;
  font-weight: 500;
}

.tip-icon {
  margin-left: 8px;
  color: var(--el-color-warning);
  cursor: pointer;
}

.settings-tabs {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

:deep(.el-tabs__header) {
  margin-bottom: 20px;
}

:deep(.el-tabs__item) {
  font-size: 15px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }

  .settings-tabs {
    padding: 10px;
  }
}
</style>